<template>
    <div class="temp-view">
        <el-container>
            <el-aside width="200px">
                <el-menu
                    :default-active="activeMenu"
                    class="menu"
                    router
                >
                    <el-menu-item index="/tmp/templates">
                        <el-icon><Collection /></el-icon>
                        <span>模板库</span>
                    </el-menu-item>
                    <el-menu-item index="/tmp/generator">
                        <el-icon><Picture /></el-icon>
                        <span>AI生成器</span>
                    </el-menu-item>
                    <el-menu-item index="/tmp/editor">
                        <el-icon><Edit /></el-icon>
                        <span>工作流编辑</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component" />
                    </keep-alive>
                </router-view>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { Collection, Picture, Edit } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'

const activeMenu = ref('/tmp/templates')
const router = useRouter()
const route = useRoute()

onMounted(() => {
    activeMenu.value = route.path
})

// 监听路由变化
watch(() => route.path, (newPath) => {
    activeMenu.value = newPath
})
</script>

<style scoped>
.temp-view {
    height: 100vh;
}

.el-container {
    height: 100%;
}

.el-aside {
    background-color: #f5f7fa;
    border-right: 1px solid #e6e6e6;
}

.menu {
    height: 100%;
    border-right: none;
}

.el-main {
    padding: 0;
    background-color: #fff;
}

:deep(.el-menu-item) {
    display: flex;
    align-items: center;
    gap: 8px;
}

:deep(.el-menu-item .el-icon) {
    margin-right: 0;
}
</style> 